import React, { useRef, useState, useEffect } from 'react';
// styles
import styles from './index.less';
// 自定义组件
// 自定义工具和方法
import { transData } from './transData';

export default () => {
  const [polygonArr, setPolygonArr] = useState([
    {
      name: 'test1',
      positions: [
        [11, 112],
        [13, 128.9],
        [20, 113],
        [11, 112],
      ],
      color: '#6bffff',
    },
    {
      name: 'test2',
      positions: [
        [15, 112],
        [16, 138.9],
        [27, 123],
        [15, 112],
      ],
      color: '#ff0000',
    },
    {
      name: 'test3',
      positions: [
        // 外部多边形
        [
          [10, 109],
          [10.8, 108.9],
          [13, 113],
          [11.8, 112],
          [10, 109],
        ],
        // 内部多边形（洞）
        [
          [10.1, 108],
          [10.7, 107.9],
          [12.9, 111],
          [11.7, 111],
          [10.1, 108],
        ],
      ],
      color: '#6bffff',
    },
  ]);
  // 清除图层
  const clearFun = () => {
    window?.LFTViewer?.setLFTAllData(
      [
        {
          type: 'ctrl',
          payload: [
            {
              ctrl: 'clearLayer',
              groupId: 'MapGroup',
              layerId: 'polygonLayer',
            },
          ],
        },
      ],
      () => {
        // console.log('清除完成了');?
      },
    );
  };
  // 绘制图层
  const drawFun = () => {
    let drawData = transData(polygonArr);
    console.log('drawData', drawData);
    window?.LFTViewer?.setLFTAllData(
      [
        {
          type: 'draw',
          payload: [
            {
              groupId: 'MapGroup',
              layerId: 'polygonLayer',
              payload: drawData,
            },
          ],
        },
      ],
      () => {
        // console.log('绘制完成了');
      },
    );
  };
  useEffect(() => {
    // console.log('viewer', window.LFTViewer);
    window?.LFTViewer?.setLFTAllData(
      [
        {
          type: 'ctrl',
          payload: [
            {
              ctrl: 'createLayer',
              groupId: 'MapGroup',
              layerId: 'polygonLayer',
            },
          ],
        },
      ],
      () => {
        // console.log('创建完成了');
        drawFun();
      },
    );
    return () => {
      clearFun();
    };
  }, []);
  return <></>;
};
